<template>
	<view class="dialog">
		<el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleDialogClose">
			<!-- 新增奖品 -->
			<el-form ref="form" :model="form" label-width="130px" :rules="rules" v-if="title == '新增奖品'">
				<el-form-item label="h5链接id" class="item" prop="link">
					<el-input v-model="form.link" placeholder="请输入h5链接id"></el-input>
				</el-form-item>
				<el-form-item label="奖品描述" class="item" prop="label">
					<el-input v-model="form.label" placeholder="请输入奖品描述"></el-input>
				</el-form-item>
				<el-form-item label="奖品配置" class="item" prop="name">
					<el-input type="textarea" v-model="form.name" rows="10" resize="none" placeholder="请输入奖品配置"></el-input>
				</el-form-item>
			</el-form>
			<!-- 编辑 -->
			<el-form ref="form" :model="form" label-width="130px" :rules="rules" v-if="title == '编辑'">
				<el-form-item label="奖品配置" class="item" prop="name">
					<el-input type="textarea" v-model="form.name" rows="14" resize="none"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleClose(true)" v-preventReClick>{{ getBtnTitle(title) }}</el-button>
				<el-button @click="handleClose(false)">取 消</el-button>
			</span>
		</el-dialog>
	</view>
</template>
<script>
	import {
		Request
	} from '../../model/request.js'
	import {
		Util
	} from '../../utils/util.js'
	// import {
	// 	config
	// } from "../../api/config.js";
	// import {
	// 	ServerUrl
	// } from "../../api/server_url.js";
	export default {
		props: {
			dialogVisible: '',
			second: '',
			title: '',
			item: {}
		},
		
		data() {
			return {
				form: {
					link: '',
					label: '',
					name: ''
				},
				rules: {
					link: [{
							required: true,
							message: '请输入h5链接id',
							trigger: 'blur'
						}
					],
					label: [{
						required: true,
						message: '请输入奖品描述',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入奖品配置',
						trigger: 'blur'
					}]
				}
			}
		},
		
		watch: {
			dialogVisible(e) {
				if (e && this.title == '编辑') {
					this.form.name = this.item.activeData
				}
			}
		},
		
		methods: {
			getBtnTitle(t) {
				if (t == '新增奖品') {
					return '确定'
				} else {
					return '更改'
				}
			},
			
			handleDialogClose(flag=false) {
				this.form = {
					link: '',
					label: '',
					name: ''
				}
				this.$refs.form.clearValidate()
				this.$emit('closeDialog', flag)
			},
			
			handleClose(e) {
				if (e == true) {
					this.$refs.form.validate(async (valid) => {
						if (valid) { // 效验成功，无错误
							if (this.title == '新增奖品') {
								let v = await Request.ACTIVEADD(this.form.link, this.form.label, this.form.name)
								if (v.code == 200) {
									Util.showToast('添加成功')
									this.handleDialogClose(true)
								} else {
									Util.showToast(v.message, 1)
								}
							} else if (this.title == '编辑') {
								let v = await Request.ACTIVEUPDATE(this.item.id, this.form.name)
								if (v.code == 200) {
									Util.showToast('修改成功')
									this.handleDialogClose(true)
								}
							}
						} else {
							console.log('效验不成功，提交失败')
							return false
						}
					})
				} else {
					this.handleDialogClose()
				}
			},
			
			saveImg(url){
				var oA = document.createElement("a");
				oA.download = '';// 设置下载的文件名，默认是'下载'
				oA.href = url;
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			}
		}
	}
</script>
<style scoped>
	.dialog {
		/* width: 100%;
	height: 100%; */
		position: absolute;
		left: 0;
		top: 0;
	}

	.el-form-item {
		position: relative;
	}

	.el-form-item::before {
		content: '*';
		position: absolute;
		left: 100px;
		top: 13px;
		color: red;
	}

	/deep/ .item .el-form-item__label {
		position: relative;
		left: -20px;
		/* color: red;
		border: solid 1px red;
		margin-left: 30px; */
	}

	/deep/ .item .el-form-item__label::before {
		content: ' ' !important;
	}

	.photo {
		width: 299px;
		height: 200px;
	}
	
	.code-content {
		text-align: center;
	}
</style>
